import React from 'react'
import BaseComponent from 'basecomponent'
import {withRouter} from 'react-router'
import './style.scss'
import Button from 'button'
import {Checkbox} from 'antd';
import appConfig from 'config'
import {USER_KEY} from 'auth'
import store from 'store'
import icons from 'icons'
import classNames from 'classnames'

class ImageList extends BaseComponent{
  constructor() {
    super(...arguments);
    this.state={
      type: this.props.type,
      listTitle: this.props.title,
      sightsData: [],
    }
  }
  componentDidMount(){

  }
  componentWillReceiveProps(nextProps){
    this.setState({
      sightsData: nextProps.sightsData.map( (item) => {return Object.assign({}, item, {checked: false})})
    })
  }

  handleDelete(){
    let type = this.state.type
    let deleteData =[]
    this.state.sightsData.forEach((item) => {
      if(item.checked)
        deleteData.push(item)
    })
    this.props.onDeleteClick(type, deleteData)
  }
  render(){
    const self = this
    const {type, listTitle, sightsData} = this.state
    return(
      <div className={classNames('image-list-wrapper', this.props.class)}>
        <div className={'title-wrapper'}>
          <span className={'title-bar'}/>
          <span className={'title-text'}>{listTitle}</span>
          <Button className={'title-btn-save'}
                  buttonType={'button'}
                  onClick={() => {this.handleDelete()}}>{'删除'}</Button>
        </div>
        <div className={'sights-wrapper'}>
          <ul className={'sights-ul'}>
            {
              sightsData && sightsData.map((item, index) => {
                return <li className={'sights-li'}>
                   <Checkbox className={'sights-check-box'} value={index} checked={item.checked}
                                             onChange={(e) => {
                                               let index = parseInt(e.target.value);
                                               let data = sightsData.map(function (i, d) {
                                                 return d === index ? Object.assign(i, {checked: e.target.checked}) : i;
                                               });
                                               self.setState({sightsData: Object.assign(sightsData, data)});
                                             }
                                             }/>
                  <img className={'sights-img'}
                       src={`${appConfig.apiHost}/File/?pid=${item.Image}&key=${store.get(USER_KEY)}`}
                       alt={'Opps!'}
                       onClick={() => {this.props.onSightClick(item)}}
                       />
                </li>
              })
            }
          </ul>
          <div className={'default-wrapper'} onClick={() => {this.props.onAddClick(type)}}>
            <img className={'image-default'} src={icons.uploadImg}/>
            <span>点击添加图片</span>
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(ImageList);
